<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">我要提问</view>
            <view class="right">
                <text class="submit" @click="submit">发布</text>
            </view>
        </view>
        
        <!-- 问题分类 -->
        <view class="category">
            <view class="label">问题分类</view>
            <view class="options">
                <view 
                    class="option" 
                    v-for="(item, index) in categories" 
                    :key="index"
                    :class="{ active: currentCategory === index }"
                    @click="selectCategory(index)"
                >
                    <view class="icon" :style="{ backgroundColor: item.color }">
                        <u-icon :name="item.icon" size="32" color="#fff"></u-icon>
                    </view>
                    <text>{{item.name}}</text>
                </view>
            </view>
        </view>
        
        <!-- 问题标题 -->
        <view class="title-input">
            <input 
                type="text" 
                v-model="title" 
                placeholder="请输入问题标题（5-30字）"
                maxlength="30"
            />
            <text class="count">{{title.length}}/30</text>
        </view>
        
        <!-- 问题内容 -->
        <view class="content">
            <textarea 
                v-model="content" 
                placeholder="请详细描述您的问题，以便医生更好地为您解答（10-500字）"
                maxlength="500"
            ></textarea>
            <text class="count">{{content.length}}/500</text>
        </view>
        
        <!-- 图片上传 -->
        <view class="images">
            <view class="label">添加图片（选填，最多9张）</view>
            <view class="list">
                <view 
                    class="image-item" 
                    v-for="(item, index) in images" 
                    :key="index"
                >
                    <image :src="item" mode="aspectFill"></image>
                    <view class="delete" @click="deleteImage(index)">
                        <u-icon name="close" size="24" color="#fff"></u-icon>
                    </view>
                </view>
                <view 
                    class="upload-btn" 
                    v-if="images.length < 9"
                    @click="chooseImage"
                >
                    <u-icon name="plus" size="32" color="#999"></u-icon>
                </view>
            </view>
        </view>
        
        <!-- 匿名提问 -->
        <view class="anonymous">
            <u-switch 
                v-model="anonymous" 
                size="24"
                active-color="#1890FF"
            ></u-switch>
            <text>匿名提问</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            categories: [
                {
                    name: '高血压',
                    icon: 'heart',
                    color: '#FF4D4F'
                },
                {
                    name: '糖尿病',
                    icon: 'food',
                    color: '#52C41A'
                },
                {
                    name: '心脏病',
                    icon: 'heart',
                    color: '#1890FF'
                },
                {
                    name: '饮食',
                    icon: 'food',
                    color: '#FAAD14'
                },
                {
                    name: '运动',
                    icon: 'sport',
                    color: '#722ED1'
                },
                {
                    name: '用药',
                    icon: 'medicine',
                    color: '#13C2C2'
                }
            ],
            currentCategory: 0,
            title: '',
            content: '',
            images: [],
            anonymous: false
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        selectCategory(index) {
            this.currentCategory = index
        },
        chooseImage() {
            uni.chooseImage({
                count: 9 - this.images.length,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.images = [...this.images, ...res.tempFilePaths]
                }
            })
        },
        deleteImage(index) {
            this.images.splice(index, 1)
        },
        submit() {
            // 表单验证
            if (!this.title.trim()) {
                uni.showToast({
                    title: '请输入问题标题',
                    icon: 'none'
                })
                return
            }
            
            if (this.title.length < 5) {
                uni.showToast({
                    title: '问题标题至少5个字',
                    icon: 'none'
                })
                return
            }
            
            if (!this.content.trim()) {
                uni.showToast({
                    title: '请输入问题内容',
                    icon: 'none'
                })
                return
            }
            
            if (this.content.length < 10) {
                uni.showToast({
                    title: '问题内容至少10个字',
                    icon: 'none'
                })
                return
            }
            
            // 模拟提交
            uni.showLoading({
                title: '发布中...'
            })
            
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '发布成功',
                    icon: 'success'
                })
                
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            }, 1000)
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    padding-bottom: 40rpx;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
        
        .submit {
            font-size: 28rpx;
            color: #1890FF;
        }
    }
    
    .category {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .label {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 20rpx;
        }
        
        .options {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10rpx;
            
            .option {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 25%;
                padding: 10rpx;
                box-sizing: border-box;
                
                &.active {
                    .icon {
                        transform: scale(1.1);
                    }
                    
                    text {
                        color: #1890FF;
                    }
                }
                
                .icon {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 20rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 10rpx;
                    transition: transform 0.3s;
                }
                
                text {
                    font-size: 24rpx;
                    color: #666;
                }
            }
        }
    }
    
    .title-input {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        position: relative;
        
        input {
            width: 100%;
            height: 60rpx;
            font-size: 28rpx;
            color: #333;
        }
        
        .count {
            position: absolute;
            right: 30rpx;
            bottom: 30rpx;
            font-size: 24rpx;
            color: #999;
        }
    }
    
    .content {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        position: relative;
        
        textarea {
            width: 100%;
            height: 300rpx;
            font-size: 28rpx;
            color: #333;
            line-height: 1.6;
        }
        
        .count {
            position: absolute;
            right: 30rpx;
            bottom: 30rpx;
            font-size: 24rpx;
            color: #999;
        }
    }
    
    .images {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .label {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 20rpx;
        }
        
        .list {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10rpx;
            
            .image-item {
                position: relative;
                width: 200rpx;
                height: 200rpx;
                margin: 0 10rpx 20rpx;
                
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }
                
                .delete {
                    position: absolute;
                    top: -10rpx;
                    right: -10rpx;
                    width: 40rpx;
                    height: 40rpx;
                    background-color: rgba(0, 0, 0, 0.5);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            
            .upload-btn {
                width: 200rpx;
                height: 200rpx;
                margin: 0 10rpx 20rpx;
                background-color: #F7F7FA;
                border-radius: 10rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    
    .anonymous {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 30rpx;
        
        text {
            font-size: 28rpx;
            color: #333;
            margin-left: 20rpx;
        }
    }
}
</style> 